<template>
    <div class="goodsinfo-container">
		<!-- 小球 -->
		<!-- 钩子函数动画 钩子函数都是通过事件绑定机制绑定到 transition元素上-->
		<transition
		@before-enter="beforeEnter"
		@enter="enter"
		@after-enter="afterEnter"
		>
		<div class="ball" v-show="flag"></div>
		</transition>
        <!-- 轮播图区域 -->
        	<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swipe :lunbotu="lunbotu" :imgname="'src'"></swipe>
					</div>
				</div>
			</div>
			<!-- 商品信息 -->
            	<div class="mui-card">
				<div class="mui-card-header">{{goodsinfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
							市场价：<span><del>￥2966</del></span>
							销售价<span>：￥2199</span>
						</p>
						<p>
							购买数量: 
							<!-- max是库存量 -->
							<!-- goodsinfo是通过ajax动态获取过来 异步请求需要时间
							可能导致的情况：nobox组件先于ajax渲染出来 此时组件被渲染的时候goodsinfo为空对象 因此传递到子组件的kucun是undefined
							 -->
							<nobox :max="goodsinfo.kucun" @func="getSelectedCount"></nobox>
						</p>
						<div>
							<!-- <router-link :to="'/home/goodsdesc/'+goodsinfo.id">
							<mt-button type="primary" size="small">立即购买</mt-button>
							</router-link> -->
							<mt-button type="primary" size="small" @click="goDesc"> 立即购买</mt-button>
							<mt-button type="danger" size="small" @click="goComment,addtocart" >加入购物车</mt-button>
						</div>
					</div>
				</div>
			</div>
			<!-- 商品参数 -->
            	<div class="mui-card">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>货号：</p>
						<p>库存：{{goodsinfo.kucun}}</p>
						<p>上架时间：</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<mt-button type="primary" size="large" plain></mt-button>
					<mt-button size="danger" plain></mt-button>
				</div>
			</div>
			
    </div>
</template>

<script>
// 导入轮播图组件
import swipe from '../sub-components/Swipper.vue'
// 导入数字框注册组件
import nobox from '../sub-components/goodsinfo-sumnumber.vue'
import {mapMutations} from 'vuex'
export default {
    data() {
        return {
			lunbotu:[],
			goodsinfo:[],
			flag:false ,//小球的显示隐藏,
			selectedCount:1 //用户选择的商品购买数量  默认选中一个
        }
    },
    methods: {
		...mapMutations(['addToCart']),
     async   getlunbotu(){
            // 获取轮播图数据
            const { data}= await this.$htpp.get("/api/"+this.id)
            if(data.status===0)return (this.lunbotu=data.message)
		},
		async getGoodsinfoByid(){
			const { data}=await this.$http.get('/api/'+this.id)
			if(data.status===0)return(this.goodsinfo=data.message)
		},
		goDesc(){
			// 点击按钮，跳转到商品的描述	页面
			// 注意：在this这个组件身上有this.$router和this.$route  输出this可以见到
			// this.$route用来专门获取路由参数 和 props差不多
			// this.$router 用来专门实现编程式导航的
			console.log(this);
			this.$router.push('/home/goodsdesc/'+this.goodsinfo.id)
		},
		goComment(){
			// this.$router.push('/home/goodscomment/'+this.goodsinfo.id)
			this.$router.push({name:'goodscomment',params:{id:goodsinfo.id}})
		},
		addtocart(){
			// 点击加入购物车
			this.flag=!this.flag
			// 调用mutations中的addToCart
			// this.$store.commit("addToCart",{id:this.id,count:this.selectedCount})
			this.addToCart({id:this.id,count:this.selectedCount,selected:true,price:this.goodsinfo.sell_price})
		},
		beforeEnter(el){
				// 小球起始状态
				el.style.transform="translate(0,0)"
		},
		enter(el,done){
			// 小球的终止状态
			el.offsetWidth

			// 动态获取小球的横纵坐标
			const ballPos=el.getBoundingClientRect()
			// 动态获取徽标的横纵坐标   跟双项数据绑定没有关系 可以直接使用dom
			const badgePos=document.getElementById('badge').getBoundingClientRect()
			const	left=badgePos.left-ballPos.left
			const top=badgePos.top-ballPos.top
			el.style.transform="translate("+left+"px,"+top+"px)"
			el.style.transition="all 1s ease"
			// 当小球动画完成之后，手动调用done，直接跳过小球的出场动画

			done()
		},
		afterEnter(el){
			// 完成后的回调函数
			this.flag=!this.flag
		},
		getSelectedCount(val){
			// 把用户选择的最新数量值，保存到data中，方便用户点击加入购物车按钮时	把数值同步到图标中
			this.selectedCount=val
		}
    },
    props:['id'],
    created() {
		this.getlunbotu()
		this.getGoodsinfoByid()
	},
	components:{
		swipe,
		nobox
	},
	
}
</script>

<style lang="less" scoped>
.goodsinfo-container{
    background-color: #eee;
    overflow: hidden;
}
.ball{
	width: 10px;
	height: 10px;
	background-color: red;
	border-radius: 50%;
// 让小球脱离文档流
	position: absolute; 
	z-index: 99;
	left: 152px;
	top: 370px;
	// 将来小球通过动画要到的位置
	transform: translate(87px, 250px);
	
}
</style>